<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>后台系统</title>
  <!-- 引入样式 -->

  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

  <link rel="stylesheet" href="../css/style.css">

  <!-- 引入组件库 -->

  <script src="../js/vue.js"></script>

  <script src="../element-ui/lib/index.js"></script>

  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <script src="../js/axios-0.18.0.js"></script>


</head>
<body>
<div id="content">
<section class="page--wrapper pt--80 pb--20">
  <div class="container">
    <div class="row">
      <!-- Main Sidebar Start -->
      <div class="main--sidebar col-md-4 pb--60" data-trigger="stickyScroll">
        <!-- Widget Start -->
        <div class="main--content-inner drop--shadow">
          <!-- Topics List Start -->
          <div class="topics--list">
            <table class="table">
              <thead class="ff--primary fs--14 text-darkest">
              <tr>
                <th>私信列表</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="conversation in conversationList">
                <td>
                  <a @click.prevent="loadConversation(1, conversation.partner.id)" href="#" class="topic--author">
                    <span class="avatar"><img :src="'img/members-img/' + conversation.partner.head_url" alt=""></span>
                    <span class="name ml--10 fw--900">{{conversation.partner ? conversation.partner.nickname : ''}}</span>
                  </a>
                  <p class="ml--6 mt--6">{{conversation.content}}</p>
                </td>
                <td>
                  <p class="ff--primary fw--500 fs--14 text-darkest ">{{conversation.timeStr}}</p>
                  <p v-show="conversation.unreadCount !== 0" class="ff--primary fw--500 fs--14 mr--8 text-darkest " style="color: red">{{conversation.unreadCount}}</p>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- Topics List End -->

          <!-- Page Count Start -->
          <div class="page--count pt--30">
            <label class="ff--primary fs--14 fw--500 text-darker">
              <span>页码</span>

              <a @click.prevent="loadConversationList(pageInfoLeft.prePage)" class="btn-link"><i class="fa fa-caret-left"></i></a>
              <a v-for="index in pageInfoLeft.navigatepageNums" @click.prevent="loadConversationList(index)" class="btn-link" :class="{active: pageInfoLeft.pageNum === index}">{{index}}</a>
              <a @click.prevent="loadConversationList(pageInfoLeft.nextPage)" href="#" class="btn-link"><i class="fa fa-caret-right"></i></a>

              <span>共 {{pageInfoLeft.pages}} 页</span>
            </label>
          </div>
          <!-- Page Count End -->
        </div>
        <!-- Widget End -->
      </div>
      <!-- Main Sidebar End -->
      <!-- Main Content Start -->
      <div v-show="partnerId !== null" class="main--content col-md-8 pb--60" data-trigger="stickyScroll">
        <div class="main--content-inner drop--shadow">
          <!-- Forum Header Start -->
          <div class="forum--header pb--30">
            <div class="forum--subtitle ff--primary fs--22 fw--700 text-black">
              <p>{{partnerNickname}} ( {{partnerUsername}} )
            </div>
          </div>
          <!-- Forum Header End -->

          <!-- Send Start -->
          <div class="input-group pb--40">
            <input v-model="messageContent" type="text" placeholder="输入" class="form-control" autocomplete="off" required>

            <div class="input-group-btn">
              <button @click.prevent="sendMessage()" class="btn-link"><i class="fa fa-send-o"></i></button>
            </div>
          </div>
          <!-- Send End -->

          <!-- Topic Replies Start -->
          <div class="topic--replies">
            <ul class="nav">
              <li v-for="message in conversation">
                <!-- Topic Reply Start Left -->
                <div v-if="message.sendId === userInfo.id" class="topic--reply">
                  <div class="body clearfix">
                    <div class="author ml--20 float--right text-center">
                      <div class="avatar" data-overlay="0.1" data-overlay-color="primary">
                        <a :href="'member-personal.html?id=' + userInfo.id">
                          <img :src="'img/members-img/' + userInfo.head_url" alt="">
                        </a>
                      </div>
                      <!--<div class="name text-darkest">
                          <p><a href="member-activity-personal.html">user1</a></p>
                      </div>-->
                      <div class="role text-uppercase">
                        <p class="date float--right">{{message.timeStr}}</p>
                      </div>
                    </div>
                    <div class="content pt--20 fs--14 ov--h float--right">
                      <p>{{message.content}}</p>
                    </div>
                  </div>
                </div>
                <!-- Topic Reply End Left -->
                <!-- Topic Reply Start Right -->
                <div v-else class="topic--reply">
                  <div class="body clearfix">
                    <div class="author mr--20 float--left text-center">
                      <div class="avatar" data-overlay="0.1" data-overlay-color="primary">
                        <a :href="'member-personal.html?id=' + message.partner.id">
                          <img :src="'img/members-img/' + message.partner.head_url" alt="">
                        </a>
                      </div>
                      <!--<div class="name text-darkest">
                          <p><a href="member-activity-personal.html">user2</a></p>
                      </div>-->
                      <div class="role text-uppercase">
                        <p class="date float--left">{{message.timeStr}}</p>
                      </div>
                    </div>
                    <div class="content pt--20 fs--14 ov--h">
                      <p>{{message.content}}</p>
                    </div>
                  </div>
                </div>
                <!-- Topic Reply End Right -->
              </li>
            </ul>
          </div>
          <!-- Topic Replies End -->

          <div class="page--count pt--50 pb--20">
            <label class="ff--primary fs--14 fw--500 text-darker">
              <span>页码</span>

              <a @click.prevent="loadConversation(pageInfoRight.prePage, partnerId)" class="btn-link"><i class="fa fa-caret-left"></i></a>
              <a v-for="index in pageInfoRight.navigatepageNums" @click.prevent="loadConversation(index, partnerId)" class="btn-link" :class="{active: pageInfoRight.pageNum === index}">{{index}}</a>
              <a @click.prevent="loadConversation(pageInfoRight.nextPage, partnerId)" class="btn-link"><i class="fa fa-caret-right"></i></a>

              <span>共 {{pageInfoRight.pages}} 页</span>
            </label>
          </div>
        </div>
      </div>
      <!-- Main Content End -->
    </div>
  </div>
</section>
</div>

<script>
  new Vue({
    el: "#content",
    data: {
      userInfo: {},
      pageInfoLeft: {},
      conversationList: {},
      partnerId: "",
      pageInfoRight: {},
      conversation: {},
      partnerNickname: "",
      partnerUsername: "",
      messageContent: ""
    },
    created: function() {
      this.loadUser();
      this.loadConversationList();
      this.partnerId = getParameter("id");
      // 如果存在成员ID，则加载聊天内容
      if (this.partnerId !== null) {
        this.loadConversation(1, this.partnerId);
      }
    },
    methods: {
      loadUser() {
        this.userInfo = JSON.parse(sessionStorage.getItem("uid"))
      },
      logout() {
        sessionStorage.removeItem("userInfo");
        this.userInfo = {};
        location.reload();
      },
      loadConversationList(pageNum) {
        const _this = this;
        axios.get("/free/message/conversationList", {
          params: {
            pageNum: pageNum,
            userId: _this.userInfo.id
          }
        }).then(function (response) {
          _this.pageInfoLeft = response.data;
          _this.conversationList = response.data.list;
        });
      },
      loadConversation(pageNum, partnerId) {
        const _this = this;
        _this.partnerId = partnerId;
        axios.get("/free/message/conversation", {
          params: {
            pageNum: pageNum,
            userId: _this.userInfo.id,
            partnerId: _this.partnerId
          }
        }).then(function (response) {
          _this.pageInfoRight = response.data;
          _this.conversation = response.data.list;
          _this.partnerNickname = response.data.list[0].partner.nickname;
          _this.partnerUsername = response.data.list[0].partner.username;
          _this.loadConversationList();
        });
      },
      sendMessage() {
        const _this = this;
        axios.post("/free/message/sendMessage", {
          sendId: _this.userInfo.id,
          receiveId: _this.partnerId,
          content: _this.messageContent
        }).then(function (response) {
          if (response.data.flag) {
            _this.loadConversation(1, _this.partnerId)
            _this.messageContent = "";
          }
        });
      }
    }
  })
</script>
</body>
</html>